@import './abstracts/variable';
@import './abstracts/mixin';

@include b(tooltip){
  position: absolute;
  left: 0;
  top: 0;
  z-index: 500;
  line-height: 1.357;
  font-size: $-tooltip-fs;
  backdrop-filter: blur($-tooltip-blur);
  background-clip: padding-box; 
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  border-radius: $-tooltip-radius;
  text-align: center;
  box-sizing: border-box;
  transition: opacity 0.2s;

  @include when(dark) {
    background: $-tooltip-bg;
    color: $-tooltip-color;
  }
  @include e(inner) {
    padding: $-tooltip-padding;
    white-space: nowrap;
  }
  @include e(menu-inner) {
    padding: 5px 0;
  }
  @include e(menu) {
    display: inline-block;
    padding: $-tooltip-padding;
    white-space: nowrap;
  }
  @include e(icon) {
    vertical-align: middle;
  }
  @include e(arrow) {
    position: absolute;
    width: 0;
    height: 0;
  }
  @include e(arrow-down) {
    border-left: $-tooltip-arrow-size solid transparent;
    border-right: $-tooltip-arrow-size solid transparent;
    border-top: $-tooltip-arrow-size solid $-tooltip-bg;
    left: 50%; 
    transform: translateX(-50%);
    bottom: -$-tooltip-arrow-size;
  }
  @include e(arrow-up) {
    border-left: $-tooltip-arrow-size solid transparent;
    border-right: $-tooltip-arrow-size solid transparent;
    border-bottom: $-tooltip-arrow-size solid $-tooltip-bg;
    left: 50%;
    transform: translateX(-50%);
    top: -$-tooltip-arrow-size;
  }
  @include e(arrow-left) {
    border-top: $-tooltip-arrow-size solid transparent;
    border-bottom: $-tooltip-arrow-size solid transparent;
    border-right: $-tooltip-arrow-size solid $-tooltip-bg;
    top: 50%;
    transform: translateY(-50%);
    left: -$-tooltip-arrow-size;
  }
  @include e(arrow-right) {
    border-top: $-tooltip-arrow-size solid transparent;
    border-bottom: $-tooltip-arrow-size solid transparent;
    border-left: $-tooltip-arrow-size solid $-tooltip-bg;
    top: 50%;
    transform: translateY(-50%);
    right: -$-tooltip-arrow-size;
  }
  @include when(light) {
    background: $-tooltip-color;
    color: $-tooltip-light-color;
    border: 1px solid $-tooltip-bg;
    
    .wd-tooltip__arrow-up{
      &::after{
        content: "";
        position: absolute;
        top: -$-tooltip-arrow-size + 1px;
        border-top-width: 0;
        margin-left: -$-tooltip-arrow-size;
        height: $-tooltip-arrow-size;
        border-color: transparent;
        border-bottom-color: #fff;
        border-style: solid;
      }
    }
    .wd-tooltip__arrow-down{
      &::after{
        content: "";
        position: absolute;
        top: -$-tooltip-arrow-size - 1;
        border-bottom-width: 0;
        margin-left: -$-tooltip-arrow-size;
        height: $-tooltip-arrow-size;
        border-color: transparent;
        border-top-color: #fff;
        border-style: solid;
      }
    }
    .wd-tooltip__arrow-left{
      &::after{
        content: "";
        position: absolute;
        top: -$-tooltip-arrow-size;
        border-left-width: 0;
        margin-left: -$-tooltip-arrow-size + 1;
        width: $-tooltip-arrow-size;
        border-color: transparent;
        border-right-color: #fff;
        border-style: solid;
      }
    }
    .wd-tooltip__arrow-right{
      &::after{
        content: "";
        position: absolute;
        top: -$-tooltip-arrow-size;
        border-right-width: 0;
        margin-left: -$-tooltip-arrow-size - 1;
        width: $-tooltip-arrow-size;
        border-color: transparent;
        border-left-color: #fff;
        border-style: solid;
      }
    }
  }
}
